<template>
  <main role="main">

    <div class="header-nav">
      <div class="clearfix">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <a v-on:click="onClickLevel1('00000000')" id="category-00000000" href="javascript:;" class="cur">全部</a>
              <a v-for="o in level1" :key="o.num" v-on:click="onClickLevel1(o.id)" v-bind:id="'category-'+o.id" href="javascript:;">{{o.name}}</a>
            </div>
          </div>
        </div>
      </div>

      <div class="skill clearfix">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <a v-on:click="onClickLevel2('11111111')" id="category-11111111" href="javascript:;" class="on">不限</a>
              <a v-for="o in level2" :key="o.num" v-on:click="onClickLevel2(o.id)" v-bind:id="'category-'+o.id" href="javascript:;">{{o.name}}</a>

              <div style="clear:both"></div>
            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <pagination ref="pagination" v-bind:list="listCourse"></pagination>
          </div>
        </div>
        <div class="row">
          <div v-for="o in courses" :key="o.num" class="col-md-4">
            <course-card v-bind:course="o"></course-card>
          </div>
          <h3 v-show="courses.length === 0">课程还未上架</h3>
        </div>
      </div>
    </div>
  </main>
</template>
<!--jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>

  import CourseCard from "../components/the-course-card";
  import Pagination from "../components/paginations";
  export default {
    name:'list',
    components: {Pagination, CourseCard},
    data:function (){
      return{
        courses:[],
        level1:[],
        level2:[],
        categorys:[],
        level1Id:"",
        level2Id:"",

      }
    },
    mounted() {
      let _this = this;
      _this.$refs.pagination.size = 6;
      _this.listCourse(1);
      _this.allCategory();
    },
    methods:{
      /**查询全部课程*/
      listCourse(page){
        let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/course/list',{
          page: page,
          size: _this.$refs.pagination.size,
          categoryId:_this.level2Id || _this.level1Id || "",
        }).then((response)=>{
          let resp = response.data;
          if(resp.success){
            _this.courses = resp.content.list;
            _this.$refs.pagination.render(page,resp.content.total);
          }
        }).catch((response)=>{
          console.log("error",response);
        })
      },
      /**所有分类查询*/
      allCategory(){
        let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/category/all').then((response)=>{
          let resp = response.data;
          let categorys = resp.content;
          _this.categorys = categorys;
          _this.level1 = [];

          for(let i=0;i<categorys.length;i++){
            let c = categorys[i];
            if(c.parent === '00000000'){
              _this.level1.push(c);
            }else{
              _this.level2.push(c);
            }
          }
        })
      },
      /**点击1级分类*/
      onClickLevel1(level1Id){
        let _this = this;

        _this.level2Id = null;
        _this.level1Id = level1Id;
        if(level1Id === "00000000"){
          _this.level1Id = null;
        }

        //点击一级分类，显示激活状态
        $("#category-"+level1Id).siblings("a").removeClass("cur");
        $("#category-"+level1Id).addClass("cur");
        //点击一级分类，二级分类无线按钮设置激活状态
        $("#category-11111111").siblings("a").removeClass("on");
        $("#category-11111111").addClass("on");
        //level2清空
        _this.level2 = [];
        let categorys = _this.categorys;
        if(level1Id === '00000000'){
          for(let i = 0;i < categorys.length;i++){
            let c = categorys[i];
            if(c.parent !== "00000000"){
              _this.level2.push(c);
            }
          }
        }
        //如果点击了一级分类，则显示一级分类下的二级分类
        if(level1Id !== '00000000'){
          for(let i = 0;i<categorys.length;i++){
            let c = categorys[i];
            if(c.parent === level1Id){
              _this.level2.push(c);
            }
          }
        }

        _this.listCourse(1);
      },
      /**点击2级分类*/
      onClickLevel2(level2Id){
        let _this = this;
        //点击二级分类，显示激活状态
        $("#category-" + level2Id).siblings("a").removeClass("cur");
        $("#category-" + level2Id).addClass("cur");

        if(level2Id === "11111111"){
          _this.level2Id = null;
        }else{
          _this.level2Id = level2Id;
        }

        _this.listCourse(1);
      },

      isEmpty(obj) {
        if ((typeof obj == 'string')) {
          return !obj || obj.replace(/\s+/g, "") == ""
        } else {
          return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);
        }
      },
    },
  }
</script>
<style>
  .header-nav{
    height: auto;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(28,31,33,.1);
    padding: 16px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
  .header-nav>div{
    width: 100%;
    padding-left: 12px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
  .header-nav a{
    float: left;
    font-size: 16px;
    color: #07111b;
    line-height: 50px;
    height: 45px;
    position: relative;
    margin-right: 46px;
    font-weight: 700;
  }
  .header-nav a:hover{
    color: #c80;
  }
  .header-nav a.cur{
    color: #c80;
  }
  .header-nav a.cur:before{
    display: block;
  }
  .header-nav a:before{
    display: none;
    content: '';
    position: absolute;
    bottom: 0;
    background: #c80;
    width: 16px;
    height: 3px;
    left: 50%;
    margin-left: -8px;
  }
  /*二级分类*/
  .skill{
    width: 100%;
    padding: 24px 0 0;
    position: relative;
    margin: 0 auto;
  }
  .skill a.on{
    color: #c80;
    background: rgba(204,136,0,.1);
  }
  .skill a{
    float: left;
    margin-right: 20px;
    padding: 0 12px;
    font-size: 14px;
    color: #4d555d;
    line-height: 32px;
    border-radius: 6px;
    margin-bottom: 12px;
  }
  .skill a:hover{
    background: #d9dde1;
  }
</style>